<template>
  <span>
    <div>
      <el-form ref="dataCollection" :model="dataCollection" label-width="100px">
        <span>
          <h4>用户信息</h4>
        </span>
        <el-form-item label="用户名" class="spanMag">
          {{ dataCollection.username }}
        </el-form-item>
        <el-form-item label="用户编码" class="spanMag">
          {{ dataCollection.user_id }}
        </el-form-item>
        <span>
          <h4>收货人信息</h4>
        </span>
        <el-form-item label="收货人" class="spanMag">
          <!-- {{ dataCollection.mobile }} -->
          {{ dataCollection.ship_name }}
          <!-- <el-input v-model="dataCollection.ship_name"></el-input> -->
        </el-form-item>
        <el-form-item label="联系方式" class="spanMag">
          <!-- {{ dataCollection.ship_mobile }} -->
          {{ dataCollection.ship_mobile }}
        </el-form-item>
        <el-form-item label="收货地址" class="spanMag">
          {{ dataCollection.ship_address_ds_text }}
        </el-form-item>
        <el-form-item
          label="支付方式"
          class="spanMag"
          v-if="
            dataCollection.order_type != 3 && dataCollection.order_type != 11
          "
        >
          {{
            dataCollection.pay_status != 1
              ? dataCollection.payment_code === "balancepay"
                ? "余额支付"
                : "微信支付"
              : "未支付"
          }}
        </el-form-item>
        <div v-if="this.dataCollection.length != 0">
          <span>
            <h4>配送员信息</h4>
          </span>
          <el-form-item label="配送员姓名" class="spanMag">
            {{ dataCollection.name_text }}
          </el-form-item>
          <el-form-item label="联系方式" class="spanMag">
            {{ dataCollection.mobile_text }}
          </el-form-item>
        </div>
        <span>
          <h4>发票信息</h4>
        </span>
        <el-form-item class="spanMag fapiao">
          <el-descriptions title="">
            <el-descriptions-item
              label="发票ID"
              v-if="dataCollection.fapiao_id"
              >{{ dataCollection.invoice[0].id }}</el-descriptions-item
            >
            <el-descriptions-item
              label="抬头"
              v-if="dataCollection.fapiao_id"
              >{{ dataCollection.invoice[0].name }}</el-descriptions-item
            >
            <el-descriptions-item
              label="手机号"
              v-if="dataCollection.fapiao_id"
              >{{ dataCollection.invoice[0].phone }}</el-descriptions-item
            >
            <el-descriptions-item
              label="邮箱"
              v-if="dataCollection.fapiao_id"
              >{{ dataCollection.invoice[0].email }}</el-descriptions-item
            >
            <el-descriptions-item
              label="发票类型"
              v-if="dataCollection.fapiao_id"
              >{{
                dataCollection.invoice[0].type == 1 ? "个人" : "企业"
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="税号"
              v-if="
                dataCollection.fapiao_id && dataCollection.invoice[0].type == 2
              "
              >{{ dataCollection.invoice[0].duty }}</el-descriptions-item
            >
            <el-descriptions-item
              label="企业地址"
              v-if="
                dataCollection.fapiao_id && dataCollection.invoice[0].type == 2
              "
              >{{ dataCollection.invoice[0].address }}</el-descriptions-item
            >
            <el-descriptions-item
              label="企业电话"
              v-if="
                dataCollection.fapiao_id && dataCollection.invoice[0].type == 2
              "
              >{{
                dataCollection.invoice[0].enterprise_phone
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="开户行名称"
              v-if="
                dataCollection.fapiao_id && dataCollection.invoice[0].type == 2
              "
              >{{ dataCollection.invoice[0].row_name }}</el-descriptions-item
            >
            <el-descriptions-item
              label="开户行账号"
              v-if="
                dataCollection.fapiao_id && dataCollection.invoice[0].type == 2
              "
              >{{ dataCollection.invoice[0].account }}</el-descriptions-item
            >

            <el-descriptions-item label="提示" v-if="!dataCollection.fapiao_id">
              <el-tag size="small">暂无开票</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-form-item>
        <span>
          <h4>订单备注</h4>
        </span>
        <el-form-item label="订单备注" class="spanMag">
          {{ dataCollection.remark }}
        </el-form-item>
        <span>
          <h4>商品信息</h4>
        </span>
        <!-- <el-form-item label="商品信息" class="spanMag"> -->
        <el-table
          :data="productData"
          border
          style="width: 100%"
          class="spanMag"
        >
          <el-table-column
            prop="name"
            align="center"
            label="商品名称"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="price"
            align="center"
            label="商品单价"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="nums" align="center" label="购买数量">
          </el-table-column>
          <el-table-column prop="amount" align="center" label="商品总价">
          </el-table-column>
        </el-table>
        <!-- </el-form-item> -->
        <div class="textFor">
          商品总价: {{ dataCollection.goods_amount }} 元
        </div>
        <span style="margin-top: 20px; display: block" v-if="orderType != 5">
          <h4>售后单</h4>
        </span>
        <div v-if="orderType != 5">
          <!-- <el-form-item label="售后单" class="spanMag"> -->
          <el-table
            max-height="200"
            :data="dataCollection.aftersalesItem"
            border
            style="width: 100%"
            class="spanMag"
          >
            <!-- <el-table-column prop="reship_id" label="退货单号" width="">
                  </el-table-column> -->
            <el-table-column prop="aftersales_id" label="售后单号" width="">
            </el-table-column>
            <el-table-column prop="type" label="售后类型" width="150">
              <!-- 1=仅退款，2退款退货 3换货 -->
              <template slot-scope="scope">
                <span>{{
                  scope.row.type == 1
                    ? "仅退款"
                    : scope.row.type == 2
                    ? "退货退款"
                    : "换货"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="150">
              <!-- 1未审核，2审核通过，3审核失败 -->
              <template slot-scope="scope">
                <span>{{
                  scope.row.status == 1
                    ? "未审核"
                    : scope.row.status == 2
                    ? "审核通过"
                    : "审核失败"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ctime" label="售后申请时间">
            </el-table-column>
          </el-table>
          <!-- </el-form-item> -->
        </div>
        <span style="margin-top: 20px; display: block" v-if="orderType != 5">
          <h4>退货单</h4>
        </span>
        <div v-if="orderType != 5">
          <!-- <el-form-item label="退货单" class="spanMag"> -->
          <el-table
            max-height="200"
            :data="dataCollection.returnItem"
            border
            style="width: 100%"
            class="spanMag"
          >
            <el-table-column prop="reship_id" label="退货单号" width="">
            </el-table-column>
            <el-table-column prop="aftersales_id" label="售后单号" width="">
            </el-table-column>
            <el-table-column prop="status_text" label="退货状态" width="150">
            </el-table-column>
            <el-table-column prop="stime" label="退货时间"> </el-table-column>
          </el-table>
          <!-- </el-form-item> -->
        </div>
        <span style="margin-top: 20px; display: block" v-if="orderType != 5">
          <h4>换货单</h4>
        </span>
        <div v-if="orderType != 5">
          <!-- <el-form-item label="换货单" class="spanMag"> -->
          <el-table
            max-height="200"
            :data="dataCollection.changeItem"
            border
            style="width: 100%"
            class="spanMag"
          >
            <el-table-column prop="change_id" label="换货单号" width="">
            </el-table-column>
            <el-table-column prop="aftersales_id" label="售后单号" width="">
            </el-table-column>
            <!-- 状态 1=审核通过待发货 2=已发换货 3=已收换货 -->
            <el-table-column prop="status" label="换货状态" width="150">
              <template slot-scope="scope">
                <span>{{
                  scope.row.status == 1
                    ? "审核通过待发货"
                    : scope.row.status == 2
                    ? "已发换货"
                    : "已收换货"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="stime" label="换货时间"> </el-table-column>
          </el-table>
          <!-- </el-form-item> -->
        </div>
        <span style="margin-top: 20px; display: block" v-if="orderType != 5">
          <h4>退款单</h4>
        </span>
        <div v-if="orderType != 5">
          <!-- <el-form-item label="退款单" class="spanMag"> -->
          <el-table
            max-height="200"
            :data="dataCollection.refundItem"
            border
            style="width: 100%"
            class="spanMag"
          >
            <el-table-column prop="refund_id" label="退款单号" width="">
            </el-table-column>
            <el-table-column prop="aftersales_id" label="售后单号" width="">
            </el-table-column>
            <el-table-column prop="status" label="退款状态" width="150">
              <!-- 1=未退款 2=已退款 3=退款失败，可以再次退款，4退款拒绝', -->
              <template slot-scope="scope">
                <span>{{
                  scope.row.status == 1
                    ? "未退款"
                    : scope.row.status == 2
                    ? "已退款"
                    : scope.row.status == 3
                    ? "退款失败"
                    : "退款拒绝"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="money" label="退款金额"> </el-table-column>
          </el-table>
          <!-- </el-form-item> -->
        </div>
      </el-form>
    </div>
  </span>
</template>

<script>
import { getShopList, quxiao, orderDetails, wancheng } from "../../utils/api";
export default {
  name: "waterOrder",
  props: ["waterOrderDetailId", "orderType"],
  data() {
    return {
      id: "",
      form: {
        order_id: "",
        user_id: "",
      },
      dataCollection: {},
      dialogVisible: false,
      loading: false,
      token: sessionStorage.getItem("token"),
      //分页数据
      page: 1,
      limit: 10,
      total: 0,
      productData: [],
      tableData: [],
      status: "",
      payStatus: "",
      ship_status: "",
      order_type: "",
      order_sh_name: "",
      order_time: "",
    };
  },
  methods: {
    // onSubmit() {
    //   this.ViewOrderList();
    // },
    // onReset() {
    //   (this.form.user_id = ""), (this.form.order_id = ""), this.ViewOrderList();
    // },
    //全部
    // complete() {
    //   this.status = "";
    //   this.payStatus = "";
    //   this.ship_status = "";
    //   this.page = 1;
    //   this.ViewOrderList();
    // },
    // //待支付
    // unpaid() {
    //   this.status = 1;
    //   this.payStatus = 1;
    //   this.ship_status = "";
    //   this.page = 1;
    //   this.ViewOrderList();
    // },
    // //待发货
    // shipping() {
    //   this.status = 1;
    //   this.payStatus = 2;
    //   this.ship_status = 1;
    //   this.page = 1;
    //   this.ViewOrderList();
    // },
    // //已发货
    // shipped() {
    //   this.status = 1;
    //   this.payStatus = 2;
    //   this.ship_status = 2;
    //   this.page = 1;
    //   this.ViewOrderList();
    // },
    // // 已送达
    // delivered() {
    //   this.status = 1;
    //   this.payStatus = 2;
    //   this.ship_status = 3;
    //   this.page = 1;
    //   this.ViewOrderList();
    // },
    // //已完成
    // accomplish() {
    //   this.status = 2;
    //   this.payStatus = "";
    //   this.ship_status = "";
    //   this.page = 1;
    //   this.ViewOrderList();
    // },
    // //取消
    // handleClose(done) {
    //   done();
    // },
    // //已取消
    // cancel() {
    //   this.status = 3;
    //   this.payStatus = "";
    //   this.ship_status = "";
    //   this.ViewOrderList();
    //   this.page = 1;
    // },
    //完成
    // accList(row) {
    //   wancheng(this.token, row.order_id).then((res) => {
    //     if (res.data.status) {
    //       this.$message({
    //         message: "操作成功",
    //         type: "success",
    //       });
    //       this.ViewOrderList();
    //     } else {
    //       this.$message.error(res.data.msg);
    //     }
    //   });
    // },
    // indexMethod(index) {
    //   if (this.token < this.limit) {
    //     return this.total - index;
    //   } else {
    //     return this.total - (this.page - 1) * this.limit - index;
    //   }
    // },
    //详情
    // particulars(row) {
    //   this.examine(row.order_id);
    //   this.dialogVisible = true;
    // },
    //取消订单
    // handleDelete(row) {
    //   this.$confirm("此操作将会取消订单, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       quxiao(this.token, row.order_id).then((res) => {
    //         if (res.data.status) {
    //           this.$message({
    //             message: "操作成功",
    //             type: "success",
    //           });
    //           this.ViewOrderList();
    //         } else {
    //           this.$message.error(res.data.msg);
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消操作",
    //       });
    //     });
    // },
    // //分页
    // handleSizeChange(val) {
    //   this.limit = val;
    //   this.ViewOrderList();
    // },
    // handleCurrentChange(val) {
    //   this.page = val;
    //   this.ViewOrderList();
    // },
    // ViewOrderList() {
    //   this.loading = true;
    //   getShopList(
    //     this.token,
    //     this.page,
    //     this.limit,
    //     this.form.user_id,
    //     this.form.order_id,
    //     this.status,
    //     this.payStatus,
    //     this.ship_status,
    //     this.order_type,
    //     this.order_sh_name,
    //     this.order_time
    //   )
    //     .then((res) => {
    //       if (res.data.status) {
    //         this.tableData = res.data.data.data;
    //         this.total = res.data.data.count;
    //         this.tableData.forEach((item) => {
    //           if (item.status == 1 && item.pay_status == 1) {
    //             item.ship_status_text = "待支付";
    //           }
    //           if (item.status == 1 && item.pay_status == 4) {
    //             item.ship_status_text = "部分退款";
    //           }
    //           if (item.status == 1 && item.pay_status == 5) {
    //             item.ship_status_text = "全部退款";
    //           }
    //           if (
    //             item.status == 1 &&
    //             item.pay_status == 2 &&
    //             item.ship_status == 1
    //           ) {
    //             item.ship_status_text = "待发货";
    //           }
    //           if (
    //             item.status == 1 &&
    //             item.pay_status == 2 &&
    //             item.ship_status == 2
    //           ) {
    //             item.ship_status_text = "已发货";
    //           }
    //           if (
    //             item.status == 1 &&
    //             item.pay_status == 2 &&
    //             item.ship_status == 3 &&
    //             item.confirm == 1
    //           ) {
    //             item.ship_status_text = "已送达/未收货";
    //           }
    //           if (
    //             item.status == 1 &&
    //             item.pay_status == 2 &&
    //             item.ship_status == 3 &&
    //             item.confirm == 2
    //           ) {
    //             item.ship_status_text = "已送达/已收货";
    //           }
    //           if (item.status == 2) {
    //             item.ship_status_text = "已完成";
    //           }
    //           if (item.status == 3) {
    //             item.ship_status_text = "已取消";
    //           }
    //         });
    //         this.tableData.forEach((item) => {
    //           item.nums = 0;
    //           item.index.items.forEach((item1) => {
    //             item.nums += item1.nums;
    //           });
    //         });
    //         let timer = setTimeout(() => {
    //           this.loading = false;
    //           clearTimeout(timer);
    //         }, 400);
    //       } else {
    //         if (res.data.msg == "token失效,请重新进行登录") {
    //           this.$router.push("/login");
    //         }
    //         if (res.data.msg == "此账号没有权限") {
    //           this.$message.error(res.data.msg);
    //           this.loading = false;
    //         }
    //         let timer = setTimeout(() => {
    //           this.$message.error(res.data.msg);
    //         }, 5000);
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err.message);
    //     });
    // },
    //详情
    examine(id) {
      console.log(id);
      this.loading = true;
      if (this.orderType == 5) {
        orderList(
          this.token,
          this.page,
          this.limit,
          id,
          "",
          "",
          "",
          5,
          "",
          "",
          ""
        )
          .then((res) => {
            if (res.data.status) {
              this.dataCollection = res.data.data.data[0];
              this.productData = this.dataCollection.index.items;
              // this.total = res.data.data.count;
              // this.tableData.forEach((item) => {
              //   if (item.avatar) {
              //     item.avatar = "https://bjsf.bjsky.top" + item.avatar;
              //   }
              //   if (item.order_type == 5) {
              //     item.order_type = "定制水";
              //   }
              //   if (item.status == 1) {
              //     item.status_text = "正常";
              //   }
              //   if (item.status == 2) {
              //     item.status_text = "完成";
              //   }
              //   if (item.status == 3) {
              //     item.status_text = "取消";
              //   }
              //   if (item.pay_status == 1) {
              //     item.pay_status_text = "未付款";
              //   }
              //   if (item.pay_status == 2) {
              //     item.pay_status_text = "已支付";
              //   }
              //   if (item.pay_status == 3) {
              //     item.pay_status_text = "部分支付";
              //   }
              //   if (item.pay_status == 4) {
              //     item.pay_status_text = "部分退款";
              //   }
              //   if (item.pay_status == 5) {
              //     item.pay_status_text = "已退款";
              //   }
              //   // `ship_status` '发货状态 0=未派单 1=未接单 2=已发货 3=已送达
              //   if (item.ship_status == 0) {
              //     item.ship_status_text = "未派单";
              //   }
              //   if (item.ship_status == 1) {
              //     item.ship_status_text = "未接单";
              //   }
              //   if (item.ship_status == 2) {
              //     item.ship_status_text = "已发货";
              //   }
              //   if (item.ship_status == 3) {
              //     item.ship_status_text = "已送达";
              //   }
              //   // 收货地址
              //   item.shouhuoAddress = item.ship_address_ds + item.ship_address;
              //   if (item.ship_address_ds == null && item.ship_address == null) {
              //     item.shouhuoAddress = "";
              //   }
              // });
              let timer = setTimeout(() => {
                this.loading = false;
                clearTimeout(timer);
              }, 400);
            } else {
              if (res.data.msg == "token失效,请重新进行登录") {
                this.$router.push("/login");
              }
              if (res.data.msg == "此账号没有权限") {
                this.$message.error(res.data.msg);
                this.loading = false;
              }
              let timer = setTimeout(() => {
                this.$message.error(res.data.msg);
              }, 5000);
            }
          })
          .catch((err) => {
            console.log(err.message);
          });
      } else {
        orderDetails(this.token, id)
          .then((res) => {
            if (res.data.status) {
              this.dataCollection = res.data.data;
              if (this.dataCollection.user) {
                this.dataCollection.mobile = this.dataCollection.user.mobile;
              }
              console.log(this.dataCollection);
              this.dataCollection.name_text =
                this.dataCollection.maintenanceInfo.name;
              this.dataCollection.mobile_text =
                this.dataCollection.maintenanceInfo.mobile;
              this.productData = this.dataCollection.items;
              this.dataCollection.returnItem.forEach((item) => {
                if (item.status == 1) {
                  item.status_text = "待退货";
                }
                if (item.status == 2) {
                  item.status_text = "送水工已接单"; //已结单
                }
                if (item.status == 3) {
                  item.status_text = "已完成"; //已结单
                }
              });
              this.dataCollection.paymentRelItem.forEach((item) => {
                this.dataCollection.payment_code_name =
                  item.bill.payment_code_name;
              });
              this.dataCollection.length =
                this.dataCollection.maintenanceInfo.length;
              this.dataCollection.ship_address_ds_text =
                this.dataCollection.ship_address_ds +
                this.dataCollection.ship_address;
              let timer = setTimeout(() => {
                this.loading = false;
                clearTimeout(timer);
              }, 400);
            } else {
              if (res.data.msg == "token失效,请重新进行登录") {
                this.$router.push("/login");
              }
              if (res.data.msg == "此账号没有权限") {
                this.$message.error(res.data.msg);
                this.loading = false;
              }
              let timer = setTimeout(() => {
                this.loading = false;
                this.$message.error(res.data.msg);
              }, 5000);
            }
          })
          .catch((err) => {
            let timer = setTimeout(() => {
              this.loading = false;
              this.$message.error(err.message);
            }, 5000);
            console.log(err.message);
          });
      }
    },
  },
  mounted() {
    // this.ViewOrderList();
    this.id = this.waterOrderDetailId;
  },
  created() {
    let id = this.waterOrderDetailId;
    this.examine(id);
  },
  watch: {
    waterOrderDetailId(n, o) {
      this.examine(n);
      console.log(n, o, "///////////////");
    },
  },
};
</script>

<style scoped>